<template>
	<view class="content">
		<u-navbar :is-back="false" title-color="#ffffff" :background="background" :border-bottom="false">
			<view class="slot-wrap" @click="toUrl('/pages/index/contract')">
				<view class="slot-wrapName">
					创建数字文明城市
				</view>
			</view>
		</u-navbar>
		<view class="bgColor">
			<view class="one">
			</view>
			<view class="two">
			</view>
		</view>
		<view class="cont">
			<view class="uni-margin-wrap">
				<swiper class="swiper" :current="contNum" @change="swuiper" :style="{ height: swiperHeight }" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
					:interval="interval" :duration="duration">
					<swiper-item v-for="(item,index) in 3" :key="index">
						<view class="contBox">
							<view class="contImage">
								<image src="https://img1.baidu.com/it/u=2805616933,3230479489&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=759" mode="aspectFill"></image>
							</view>
							<view class="contCont">
								<view class="contTit">
									这里是标题用例
								</view>
								<view class="contText">
									这里是内容简介用例，
									这里是内容简介用例，
									这里是内容简介用例，
									这里是内容简介用例，
									这里是内容简介用例，
								</view>
								<view style="height: 20rpx;">
								</view>
								<view class="contBottom">
									<view class="contLeft">
										<view class="contPhoto">
											<image src="/static/logo.png" mode=""></image>
										</view>
										<view class="contName">
										    名称
										</view>
									</view>
									<view class="contRight">
										<view class="contRightLi">
											<u-icon name="eye" color="#999999" size="30"></u-icon>
											34353
										</view>
										<view class="contRightLi">
											<u-icon name="thumb-up" color="#999999" size="30"></u-icon>
											34353
										</view>
										<view class="contRightLi">
											<u-icon name="chat" color="#999999" size="30"></u-icon>
											34353
										</view>
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="dotBox">
				<view class="dotLi" :class="contNum==index?'dotLiA':''" v-for="(item,index) in 3" :key="index">
				</view>
			</view>
		</view>
		<!-- 底部导航栏 -->
		<view class="tabbarBox">
			<view class="tabbar">

				<view class="tabbar-item" @click="goSwitchTab('/pages/tabBar/category')">
					<view class="tabbar-image">
						<image src="/static/tabbar/homeActive.png" mode="" style="width: 47.22rpx;height: 47.22rpx;">
						</image>
					</view>
					<view class="tabbat-name" style="color: #AFD4FE;">
						首页
					</view>
				</view>
				<view class="tabbarZj" @click="toUrl('/pages/snapshot/snapshot')">
					<view class="tabbarZjCont">
						<u-icon name="camera" color="#ffffff" size="40"></u-icon>
						<view class="tabbarZjContText">
							随手拍
						</view>
					</view>
				</view>
				<view class="tabbar-item" @click="goSwitchTab('/pages/tabBar/my')">
					<view class="tabbar-image">
						<image src="/static/tabbar/mine.png" mode="" style="width: 50rpx;height: 50rpx;"></image>
					</view>
					<view class="tabbat-name">
						我的
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				background: {
					backgroundColor: '#AED4FF',
				},
				contNum:0,
				indicatorDots: false,
				            autoplay: false,
				            interval: 2000,
				            duration: 500,
							swiperHeight:""
			}
		},
		mounted() {
		  let that=this;
		  uni.getSystemInfo({
		    success: resu => {
		      // resu 可以获取当前屏幕的高度
		      const query = uni.createSelectorQuery();
		      query.select('.cont').boundingClientRect(); //.swiper是swiper类名，获取当前swiper距离顶部的位置
		      query.exec(res => {
		  	  that.swiperHeight = resu.windowHeight - res[0].top - 155 + 'px'; //屏幕的高度减去当前swiper距离顶部的高度就是剩余屏幕的高度 然后动态赋值给swiper
		        console.log('页面的剩余高度', that.swiperHeight);
		      });
		    },
		    fail: res => {}
		  });
		},
		onLoad() {

		},
		methods: {
			toUrl(urlSrc){
				uni.reLaunch({
					url:urlSrc
				})
			},
			swuiper(e){
				console.log(e)
				this.contNum = e.detail.current
			}

		}
	}
</script>

<style lang="scss">
	.bgColor {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		// background: #2A6E3F;
		z-index: -1;

		.one {
			width: 100%;
			height: 70%;
			background: #AFD4FE;
		}

		.two {
			width: 100%;
			height: 70%;
			background: #ffffff;
			border-radius: 400rpx 400rpx 0 0;
			position: absolute;
			bottom: 0;
		}
	}
	.cont{
		width: 100%;
		padding: 40rpx 60rpx 0rpx;
		box-sizing: border-box;
		.uni-margin-wrap{
			width: 100%;
			height: 100%;
			.swiper{
				width: 630rpx;
				border-radius: 10rpx;
				box-shadow:0px 0px 5px 0px rgba(0,0,0,0.45);
				-webkit-box-shadow:0px 0px 5px 0px rgba(0,0,0,0.45);
				-moz-box-shadow:0px 0px 5px 0px rgba(0,0,0,0.45);
				.contBox{
					width: 100%;
					height: 100%;
					
					.contImage{
						width: 100%;
						height: 70%;
						border-radius: 10rpx;
						image{
							width: 100%;
							height: 100%;
							border-radius: 10rpx 10rpx 0 0;
						}
					}
					.contCont{
						width: 100%;
						height: 30%;
						padding: 30rpx 20rpx 0;
						box-sizing: border-box;
						.contTit{
							font-size: 35rpx;
							font-weight: bold;
							color: #000000;
						}
						.contText{
							font-size: 28rpx;
							color: #000000;
							margin-top: 30rpx;
							display: -webkit-box;    
							-webkit-box-orient: vertical;    
							-webkit-line-clamp: 2;    
							overflow: hidden;
							line-height: 50rpx;
						}
						.contBottom{
							display: flex;
							align-items: center;
							justify-content: space-between;
							border-top: 1px solid #dedede;
							padding: 20rpx 0;
							.contLeft{
								display: flex;
								align-items: center;
								
								.contPhoto{
									width: 70rpx;
									height: 70rpx;
									border-radius: 50%;
									image{
										width: 100%;
										height: 100%;
										border-radius: 50%;
									}
								}
								.contName{
									font-size: 28rpx;
									color: #000000;
									margin-left: 20rpx;
								}
							}
							.contRight{
								display: flex;
								align-items: center;
								.contRightLi{
									display: flex;
									align-items: center;
									font-size: 26rpx;
									color: #999999;
									margin-left: 20rpx;
								}
							}
						}
					}
				}
			}
		}
	}
	.tabbarBox {
		width: 100%;
		// height: 150rpx;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: flex-end;

		.tabbar {
			width: 100%;
			height: 100rpx;
			background: #F9F9F9;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.tabbar-item {
				// width: 134rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;

				.tabbar-image {

					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 77rpx;
						height: 77rpx;
						display: block;
					}
				}

				.tabbat-name {
					font-size: 22rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #848383;
					text-align: center;
					margin-top: 5rpx;
				}
			}

			.tabbarZj {
				margin-top: -30rpx;

				.tabbarZjCont {
					width: 130rpx;
					height: 130rpx;
					border-radius: 50%;
					background: #AFD4FE;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;

					.tabbarZjContText {
						font-size: 22rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #111111;
						text-align: center;
						color: #ffffff;
						margin-top: 10rpx;
					}
				}
			}
		}
	}

	.slot-wrap {
		margin-left: 30rpx;
		font-size: 30rpx;
		color: #ffffff;
		font-weight: bold;
		display: flex;
		align-items: center;

		.slot-wrapName {

			// max-width: 240rpx;
			// white-space: nowrap;
			// /* 禁止换行 */
			// overflow: hidden;
			// /* 隐藏溢出内容 */
			// text-overflow: ellipsis;
			// /* 使用省略号表示溢出内容 */
		}
	}
	.dotBox{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 40rpx;
		.dotLi{
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			background: #E7E7E7;
			margin-left: 20rpx;
		}
		.dotLiA{
			width: 70rpx;
			border-radius: 20rpx;
		}
		.dotLi:first-child{
			margin-left: 0rpx;
		}
	}
</style>